<template>
  <div>
    <a-list
      class="replyBox"
      item-layout="vertical"
      size="large"
      :pagination="pagination"
      v-if="replyList.records != null && replyList.records.length > 0"
      :data-source="replyList.records"
    >
      <a-list-item slot="renderItem" key="item.title" slot-scope="item, index" style="overflow: hidden">
        <img class="headImg" v-if="item.headUrl == null" src="~@/assets/icon/u18916.png" alt="" />
        <img class="headImg" v-else :src="'data:image/png;base64,' + item.headUrl" alt="" />
        <div class="c1">
          <p>
            {{ item.nickname }} <span style="margin-left: 20px">{{ item.replyDate }}</span>
          </p>
          <p>{{ item.content }}</p>
          <div class="imgBox">
            <img
              :src="'data:image/png;base64,' + imgUrl"
              alt=""
              v-for="(imgUrl, index0) in item.imgUrls.split('|')"
              :key="index0"
              style="cursor: pointer"
              preview="1"
            />
          </div>
          <div>
            <p class="p1">
              <span>{{ item.childSmuInfoChat[0].nickname }}</span> 等人
              <span>共{{ item.childSmuInfoChat.length }}条回复</span>
              <span class="container" @click="onReply(index)" v-show="!isShowArr[index]"
                ><span class="cornerDown"></span
              ></span>
              <span class="container" @click="onReply(index)" v-show="isShowArr[index]"
                ><span class="cornerUp"></span
              ></span>
            </p>
            <!-- <div v-show="isShow"> -->
            <div v-for="(child, index1) in item.childSmuInfoChat" :key="index1" v-show="isShowArr[index]">
              <img
                class="headImg"
                v-if="child.headUrl == null"
                src="~@/assets/icon/u18916.png"
                style="width: 20px; height: 20px; margin-right: 10px"
                alt=""
              />
              <img
                v-else
                class="headImg"
                :src="'data:image/png;base64,' + child.headUrl"
                style="width: 20px; height: 20px; margin-right: 10px"
                alt=""
              />
              <div class="childBox">
                <span>{{ child.nickname }}：</span>
                <span>{{ child.content }}</span>
                <div class="imgBox">
                  <img
                    :src="'data:image/png;base64,' + imgUrl"
                    alt=""
                    v-for="(imgUrl, index2) in child.imgUrls.split('|')"
                    :key="index2"
                    style="cursor: pointer"
                    preview="2"
                  />
                </div>
                <!-- <template v-for="(imgUrl, index2) in child.imgUrls.split('|')">
                  {{ imgUrl }}
                  <img :src="imgUrl" alt="" :key="index2" />
                </template> -->
              </div>
            </div>
            <!-- </div> -->
          </div>
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
export default {
  name: 'list',
  props: ['replyList'],
  data() {
    return {
      pagination: {},
      // replyList: [
      //   {
      //     user: '1111',
      //     time: '2021-10-20',
      //     content: '11111',
      //     url: '~@/assets/logo-white.png'
      //   },
      //   {
      //     user: '2222',
      //     time: '2021-10-20',
      //     content: '22222',
      //     url: './test.jpg'
      //   },
      //   {
      //     user: '3333',
      //     time: '2021-10-20',
      //     content: '3333',
      //     url: './test.jpg'
      //   }
      // ],
      pageFilter: {
        currentPage: 1, // 当前页数
        pageSize: 5, // 每页显示几条数据:
      },
      isShowArr: [],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initData()
    })
  },
  updated() {
    this.$nextTick(() => {
      this.initData()
    })
  },
  // watch: {
  //   replyList(newValue, oldValue) {
  //     // console.log('newValue')
  //     // console.log(newValue)
  //     if (newValue.total <= 20) {
  //       this.pagination = undefined
  //     } else {
  //       this.setPagination(parseInt(newValue.current), parseInt(newValue.size), parseInt(newValue.total))
  //     }
  //   },
  // },
  methods: {
    initData() {
      // console.log("this.replyList")
      // console.log(this.replyList)
      if (this.replyList.records != undefined && this.replyList.records.length > 0) {
        this.replyList.records.forEach((item) => {
          this.isShowArr.push(false)
        })
      }
      if (this.replyList.total <= 20) {
        this.pagination = undefined
      } else {
        this.setPagination(
          parseInt(this.replyList.current),
          parseInt(this.replyList.size),
          parseInt(this.replyList.total)
        )
      }
    },
    onReply(index) {
      this.$set(this.isShowArr, index, !this.isShowArr[index])
    },
    getUrl(url) {
      return process.env.VUE_APP_API_BASE_URL + '/swt/file/download?path=' + url
    },
    setPagination(current, size, total) {
      // console.log(current, size, total);
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showTotal: (total) => `总共 ${total} 个项目`,
        showQuickJumper: true,
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['20', '30', '40', '50'], // 每页数量选项
        onShowSizeChange: (current, pageSize) => {
          this.showSizeChang(current, pageSize)
        }, // 改变每页数量时更新显示
        onChange: (current, pageSize) => {
          this.showSizeChang(current, pageSize)
        },
      }
    },
    showSizeChang(current, pageSize) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.pageFilter.currentPage = current
      this.pageFilter.pageSize = pageSize
      // this.refreshTable()
      this.$emit('onRefreshTable', this.pageFilter)
    },
  },
}
</script>

<style lang="less" scoped>
.replyBox {
  overflow: hidden;
  .headImg {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 50%;
  }
  .childBox {
    float: left;
  }
  .imgBox img {
    width: 80px;
    height: 80px;
    margin: 10px 20px 10px 0;
    cursor: pointer;
  }
  .c1 {
    float: left;
    margin-left: 20px;
    p {
      margin-bottom: 5px;
    }
    .p1 {
      position: relative;
      span {
        color: #f29821;
      }
      .container {
        width: 20px;
        margin: 0px auto;
        position: relative;
      }
      .cornerDown {
        position: absolute;
        top: 7px;
        left: 10px;
        width: 0px; /*  宽高设置为0，很重要，否则达不到效果 */
        height: 0px;
        border: 10px solid #f29821;
        border-bottom-color: transparent; /* 设置透明背景色 */
        border-left-color: transparent;
        border-right-color: transparent;
        cursor: pointer;
      }
      .cornerUp {
        position: absolute;
        top: -4px;
        left: 10px;
        width: 0px; /*  宽高设置为0，很重要，否则达不到效果 */
        height: 0px;
        border: 10px solid #f29821;
        border-top-color: transparent; /* 设置透明背景色 */
        border-left-color: transparent;
        border-right-color: transparent;
        cursor: pointer;
      }
    }
  }
  /deep/ .ant-list-items {
    height: 400px;
    overflow-y: auto;
  }
  /deep/ .ant-list-pagination {
    margin-top: 4px;
  }
}
.modalImg {
  width: 650px;
}
</style>
